<template>
  <!--  配置版本管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.equipSn" clearable placeholder="请输入采集仪sn" @input="isSearch=true">
        <template slot="prepend">采集仪SN</template>
      </el-input>
      <el-input v-model="form.sampleIndex" style="width: 250px" clearable placeholder="可输入">
        <template slot="prepend">sampleIndex</template>
      </el-input>
      <el-select v-model="form.returnFlag" clearable placeholder="响应状态" style="width: 120px">
        <el-option
          v-for="item in EnumSysBooleanList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-date-picker
        clearable
        style="min-width:400px;height: 40px"
        @change="isSearch=true"
        value-format="timestamp"
        v-model="timerArray"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>

      <el-button :disabled="isSearch" :class="isSearch?'common_btn-deleteDis': 'common_btn-delete'"
                 icon="el-icon-delete" @click="deleteList()">删除
      </el-button>
    </div>
    <div class="page_main">
      <el-row :gutter="20" class="statistics_view">
        <el-col :span="3">
          <div class="grid-content bg-purple" :class="form.action === ''?'activeAction':''" @click="filterAction('')">
            所有交互
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple" :class="form.action === 3?'activeAction':''" @click="filterAction(3)">单次采样<span
            class="num_view">{{statistics.dccyCount}}</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple" :class="form.action === 4?'activeAction':''" @click="filterAction(4)">报警采样<span
            class="num_view">{{statistics.bjcyCount}}</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple" :class="form.action === 6?'activeAction':''" @click="filterAction(6)">
            获取配置版本<span class="num_view">{{statistics.pzbbCount}}</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple" :class="form.action === 7?'activeAction':''" @click="filterAction(7)">
            获取配置文件<span class="num_view">{{statistics.pzwjCount}}</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple" :class="form.action === 8?'activeAction':''" @click="filterAction(8)">上报状态<span
            class="num_view">{{statistics.sbztCount}}</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple" :class="form.action === 9?'activeAction':''" @click="filterAction(9)">快速采样<span
            class="num_view">{{statistics.kscyCount}}</span>
          </div>
        </el-col>
      </el-row>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="equipSn" label="采集仪sn" min-width="120"></el-table-column>
        <el-table-column prop="actionName" label="数据类型" min-width="120"></el-table-column>
        <el-table-column prop="sampleIndex" label="sampleIndex" min-width="120"></el-table-column>
        <el-table-column prop="returnFlagName" label="服务器是否响应" min-width="120"></el-table-column>
        <el-table-column
          width="170"
          label="采样时间">
          <template  slot-scope="scope"><span v-if="scope.row.sampleTime">{{scope.row.sampleTime | formatTimer}}</span></template>

        </el-table-column>
        <el-table-column
          width="170"
          label="上报时间">
          <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">详情</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next,jumper" :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="this.currentRow.equipSn + '-数据详情'" :visible.sync="isShowDialog" :close-on-click-modal="false"
               width="1080px">
      <!-- 具体form表单 -->
      <div style="text-align: center;padding:10px">
        <p class="equip_label"><span class="info_title">数据类型:</span><span class="info">{{currentRow.actionName}}</span>
        </p>
        <p class="equip_label" v-if="currentRow.sampleIndex"><span class="info_title">sampleIndex:</span><span
          class="info">{{currentRow.sampleIndex}}</span></p>
        <p class="equip_label"><span class="info_title">是否响应:</span><span
          class="info">{{currentRow.returnFlagName}}</span></p>
        <p class="equip_label"><span class="info_title">上报时间:</span><span class="info">{{currentRow.createTime | formatTimer}}</span>
        </p>
      </div>

      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="12">
          上报数据
          <el-input type="textarea" :rows="22" v-model="currentRow.dataJson">
          </el-input>
        </el-col>
        <el-col :span="12">
          响应数据
          <el-input type="textarea" :rows="22" v-model="currentRow.returnDataJson">
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px">

        <el-col :span="24">
          备注
          <el-input type="textarea" :rows="6" v-model="currentRow.remark" placeholder="暂无备注">
          </el-input>
        </el-col>
      </el-row>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" type="primary" @click="isShowDialog= false">确定</el-button>
      </span>
    </el-dialog>
    <!--    删除弹窗-->
    <el-dialog title="删除" :visible.sync="isShowDialogSearch" :close-on-click-modal="false"
               width="580px">
      <!-- 具体form表单 -->
      <div style="text-align: center;padding:10px;padding-bottom: 20px">
        请问是否删除<span
        style="color:red;">{{search.startCreateTime | formatTimer}}-- {{search.endCreateTime | formatTimer}}</span>的数据
      </div>
      <el-form label-width="160px">
        <el-form-item label="请输入完整的sn码：" prop="equipSn">
          <el-input :rows="22" v-model="search.equipSn" placeholder="请输入完整的SN码" @change="$forceUpdate">
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" type="primary" @click="isSearchDelete()">确定</el-button>
      </span>
    </el-dialog>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>

<script>
  import XLoading from '@/components/animation/x-loading.vue'
  import {equipRecordQueryList, equipRecordStatic, equipDelete} from '@/services/model/equip'
  import Format from '@/utils/format'
  import constUrl from '@/services/env'
  // form表单校验规则
  const RULES = {
    versionName: {
      required: true,
      message: '请输入版本名称'
    },
  }
  const timer = 3 * 24 * 3600 * 1000
  export default {
    components: {XLoading},
    data() {
      return {
        search: {equipSn: ''},
        isShowDialogSearch: false,
        isSearch: true,
        constUrl,
        isLoading: false,
        convertBefore: '',//转换前
        convertAfter: '',//转换后
        form: {
          action: '',
          page: 1,
          pageSize: 10,
          total: 0,
          startCreateTime: Date.parse(new Date()) - timer,
          endCreateTime: Date.parse(new Date())
        },
        rules: RULES, // 表单校验的规则
        tableList: [],
        EnumSysBooleanList: [
          {code: 1, name: '响应'},
          {code: 0, name: '未响应'},
        ],
        timerArray: [],
        currentRow: {}, // 新增数据
        isShowDialog: false,
        statistics: {},
        pickerOptions: {
          shortcuts: [
            {
              text: '最近24小时',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
            , {
              text: '最近一年',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
                picker.$emit('pick', [start, end])
              }
            }
          ],
          onPick: obj => {
            this.picerMinDate = new Date(obj.minDate).getTime()
          },
          disabledDate: time => {
            if (this.picerMinDate) {
              // 最多可选3个月
              const LIMIT = 90 * 24 * 60 * 60 * 1000
              const maxTime = this.picerMinDate + LIMIT
              const minTime = this.picerMinDate - LIMIT
              return time.getTime() > maxTime || time.getTime() < minTime
            }
          }
        },
      }
    },
    computed: {
      sn() {
        return this.$route.params.sn
      },
      equipId() {
        return this.$route.params.equipId
      },
      jumpTimerArray() {
        return this.$route.params.jumpTimerArray
      },
    },
    watch: {
      sn(val) {
        if (val) {
          this.form.equipSn = val
          this.$forceUpdate()
          this.queryList()
        }
      },
      equipId(val) {
        if (val) {
          this.form.equipId = val
          this.$forceUpdate()
          this.queryList()
        }
      },
      jumpTimerArray(val) {
        if (val) {
          this.timerArray = val
          this.$forceUpdate()
          this.queryList()
        }
      },

    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      },
    },
    methods: {
      async isSearchDelete() {
        if (this.search.equipSn.includes(this.form.equipSn)) {
          try {
            let res = await equipDelete(this.search)
            if (res.code === 200) {
              this.$notify({
                type: 'success',
                title: '提示',
                message: '删除成功'
              })
              this.isShowDialogSearch = false
              this.isSearch = true
              this.queryList()
            }
          } catch (e) {
            console.log(e)
          }
        }else {
          this.$message(
            {
              type: 'error',
              showClose: true,
              message: '请传入正确的SN码'
            })
        }
      },
      deleteList() {
        this.isShowDialogSearch = true
        let form = JSON.parse(JSON.stringify(this.form))

        this.search.startCreateTime = form.startCreateTime
        this.search.endCreateTime = form.endCreateTime
      },
      filterAction(code) {
        this.form.action = code
        this.queryList();
      },
      infoToJson(info) {
        if (!info) {
          return '没有信息！'
        }
        info = info.replace(/ \+/g, '')
        info = info.replace(/[\r\n]/g, '')
        let parseJSON
        try {
          parseJSON = JSON.parse(info)
        } catch (e) {
          return info;
        }
        return JSON.stringify(parseJSON, null, 2)
      },
      async getEquipRecordStatic() {
        let timerArray = this.timerArray || []
        this.form.startCreateTime = timerArray[0]
        this.form.endCreateTime = timerArray[1]
        let res = await equipRecordStatic(this.form)
        this.statistics = res.data
        this.isLoading = false
      },
      handleEdit(row) {
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.currentRow.dataJson = this.infoToJson(this.currentRow.dataJson)
        this.currentRow.returnDataJson = this.infoToJson(this.currentRow.returnDataJson)
        this.isShowDialog = true
      },

      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      async queryList() {
        //加了筛选条件清除equipId条件
        if (this.form.equipSn) {
          this.$set(this.form, "equipId", '');
        }
        this.isLoading = true
        let timerArray = this.timerArray || []
        this.form.startCreateTime = timerArray[0]
        this.form.endCreateTime = timerArray[1]
        let res = await equipRecordQueryList(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false
        if (res.code == 200) {
          if (this.form.startCreateTime && this.form.equipSn) {
            this.isSearch = false
          }
        }
        this.getEquipRecordStatic()
      },
    },
    mounted() {
      this.$set(this.form, "equipSn", this.sn);
      this.$set(this.form, "equipId", this.equipId);
      this.$set(this, "timerArray", this.jumpTimerArray);
      this.queryList()
    },
    activated() {
      this.form.startCreateTime = Date.parse(new Date()) - timer
      this.form.endCreateTime = Date.parse(new Date())
    }

  }
</script>

<style lang="less" scoped>
  p {
    display: inline
  }

  a {
    color: #1990FE
  }

  .tips {
    font-size: 12px;
    color: red;
    text-align: center;

    /deep/ .el-input-group__prepend {
      padding: 0 10px;
    }

    /deep/ .el-input-group__append {
      padding: 0 10px;
    }
  }

  .bg-purple {
    background: #4f4f4f;
  }

  .grid-content {
    cursor: pointer;
    text-align: center;
    line-height: 80px;
    font-size: 18px;
    color: white;
    border-radius: 5px;
    min-height: 80px;

    .num_view {
      background-color: #4caf50;
      border-radius: 5px;
      padding: 5px;
      margin-left: 15px;
    }
  }

  .statistics_view {
    margin-bottom: 10px;
    animation: fade_bottom 1.5s;
    @keyframes fade_bottom {
      from {
        transform: translateY(30px);
        opacity: 0.2;
      }
      to {
        transform: translateY(0px);
        opacity: 0.9;
      }
    }
  }

  .equip_label {
    color: #1990FE;
    font-size: 18px;
    margin-left: 20px;
    font-weight: 600;
    padding: 2px 0 3px 10px;

    .info {
      font-size: 16px;
      color: #000000;
      margin-left: 5px;
    }
  }

  .activeAction {
    font-weight: 600;
    background-color: #2196f3;
    box-shadow: 0 2px 12px 0 #1b1b1b;
  }

</style>
